<template>
  <div class="m-cateList">
    <!--头部-->
    <van-search
      class="cateListHeader"
      v-model="value"
      placeholder="请输入搜索关键词"
    />
    <!--内容区域-->
    <div class="m-cateContainer">
      <!-- 左侧导航 -->
      <div class="m-cateNavVerWrap">
        <van-sidebar
          class="m-cateNavVer"
          v-model="activeKey"
          @change="onChange"
        >
          <van-sidebar-item title="为你推荐" />
          <van-sidebar-item title="居家生活" />
          <van-sidebar-item
            :title="item.name"
            v-for="item in categoryList"
            :key="item.id"
          />
        </van-sidebar>
      </div>
      <!-- 右侧主体 -->
      <div class="m-subCateList">
        <!-- 上方图片 -->
        <div class="banner">
          <van-image
            width="264px"
            height="96px"
            lazy-load
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
        </div>
        <!-- 下方列表 -->
        <div class="contentList">
          <van-grid :column-num="3">
            <van-grid-item
              v-for="item in subCategoryList"
              :key="item.id"
              :icon="item.wap_banner_url"
              :text="item.name"
            />
          </van-grid>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Notify } from "vant";

export default {
  name: "catelist",
  data() {
    return {
      value: "",
      activeKey: 0,
      categoryList: [], //导航数据
      currentCategory: {}, //选中的类别数据,
      currentId: "0",  
      subCategoryList:[]  //子类数组
    };
  },
  // 页面加载后的生命周期回调
  mounted() {},
  methods: {
    onChange(index) {
      Notify({ type: "primary", message: index });
      this.activeKey = index;
      this.currentCategory =this.categoryList[this.activeKey]  
      this.currentId = this.categoryList[this.activeKey].id;  //选中的类别的id
      // 获取当前分类数据
      this.GetCurrentCategory()
    },
    // 获取全部分类数据
    GetcategoryList() {
      GetChannelDataApi().then((res) => {
        // console.log("res1", res);
        this.categoryList = res.data.categoryList;  //左侧导航数据

        //选中的类别的id，默认第一个类别被选中
        this.currentId = this.categoryList[0].id;  
        // 当前显示的类别数据，图片和标题使用
        this.currentCategory = res.data.currentCategory;  

        //当前显示的类别数据 图文混排区域使用
        this.subCategoryList = res.data.currentCategory.subCategoryList;  
      });
    },

    // 获取当前分类数据
    GetCurrentCategory() {
      GetFenleiDataApi({ id: this.currentId }).then((res) => {
        // console.log("res12", res);
        // 当前显示的类别数据，图片和标题使用
        this.currentCategory = res.data.currentCategory;  

        //当前显示的类别数据 图文混排区域使用
        this.subCategoryList = res.data.currentCategory.subCategoryList;
      });
    },
  },
  created() {
    this.GetcategoryList();  // 获取全部分类数据
  },
  computed: {},
};
</script>

<style lang="less">
.m-cateList {
  // 头部
  .cateListHeader {
    width: 100%;
    height: 44px;
    padding: 0 15px;
    border-bottom: 1px solid #ccc;
  }
  // 内容区域
  .m-cateContainer {
    display: flex;
    // 左侧导航
    .m-cateNavVerWrap {
      width: 80px;
     
      border-right: 1px solid #ccc;
      .m-cateNavVer {
      }
    }
    // 右侧主体
    .m-subCateList {
      flex: 1;
      padding: 15px;
      height: 1000px;
      // 上方图片
      .banner {
        text-align: center;
        position: relative;
        height: 100px;
        font-size: 15px;
      }
      // 下方列表
      .contentList {
      }
    }
  }
}
</style>
